@use "mixin";

@include mixin.zoom-animation('top', scaleY(0), scaleY(1), center top);
@include mixin.zoom-animation('left', scale(.45, .45), scale(1, 1), top left);
@include mixin.zoom-animation('right', scale(.45, .45), scale(1, 1), top right);
@include mixin.zoom-animation('bottom', scaleY(0), scaleY(1),  center bottom);


// .zoom-in-top-enter{
//     opacity: 0;
//     transform: scaleY(0);
// }
// .zoom-in-top-enter-active{
//     opacity: 1;
//     transform: scaleY(1);
//     transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
//     transform-origin: center top;
// }
// .zoom-in-top-exit{
//     opacity: 1;
// }
// .zoom-in-top-exit-active{
//     opacity: 0;
//     transform: scaleY(0);
//     transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
//     transform-origin: center top;
// }